<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover"> </el-card>
      </div>
    </transition>
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" border :data="mainList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="自增主键" align="center" prop="id" v-if="true" />
        <el-table-column label="店铺名称" align="center" prop="claimId" />
        <el-table-column label="险种名称" align="center" prop="businessSource" />
        <el-table-column label="承保单量" align="center" prop="jdReportId" />
        <el-table-column label="承保保费" align="center" prop="reportTime" />
        <el-table-column label="出险数量" align="center" prop="occurrenceTime" />
        <el-table-column label="赔付金额" align="center" prop="closeTime" />
        <el-table-column label="出险率" align="center" prop="reportMethod" />
        <el-table-column label="赔付率" align="center" prop="performanceType" />
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="图表" placement="top">
              <el-button link type="primary" icon="Histogram" @click="handleviewachart(scope.row)" v-hasPermi="['system:main:edit']"></el-button>
            </el-tooltip>
            <!-- <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:main:remove']"></el-button>
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="90%" append-to-body>
      <div ref="commandstats" style="height: 600px" />
    </el-dialog>
  </div>
</template>
<script setup name="Shop" lang="ts">
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const showSearch = ref(true);
const loading = ref(false);
const commandstats = ref();
const mainList = ref([
  {
    businessSource: '111'
  }
]);
const total = ref(0);
const dialog = reactive({
  visible: false,
  title: ''
});
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
});
const { queryParams } = toRefs(data);
const getList = async () => {};
const handleviewachart = () => {
  dialog.visible = true;
  nextTick(() => {
    const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
    commandstatsIntance.setOption({
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '0%',
        containLabel: true
      },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {}
      //     }
      //   },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    });
  });
};
</script>
<style scoped lang="scss"></style>
